<template>
  <div class="shop">
    <v-title :title="detail.merchant_name || $route.meta.title" />
    <arrow />
    <div class="avatar">
      <img :src="detail.merchant_avatar" />
    </div>
    <div class="queue" @click="$router.push(`/queue-scan/${id}`)">
      <cube-button primary>查看排队</cube-button>
    </div>
    <div class="desc">
      <div class="name">{{ detail.merchant_name }}</div>
      <div class="mobile"><span>电话:</span> {{ detail.mobile }}</div>
      <div class="address"><span>地址:</span> {{ detail.merchant_address }}</div>
    </div>
    <div class="list">
      <img :src="item" v-for="(item, index) in list" :key="index" />
    </div>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
export default {
  components: {
    'v-title': Title,
    Arrow
  },
  data() {
    return {
      detail: {},
      list: [],
      id: 0
    }
  },
  methods: {
    getView() {
      api.Uni.shopView({ id: this.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        // console.log(111, data)
        this.detail = data
        if (data.product) {
          data.product.forEach(x => {
            if (x.image) {
              this.list.push(x.image.path)
            }
          })
        }
      })
    }
  },
  created() {
    this.id = this.$route.params.id || 0
    console.log(this.id)
    this.getView()
  }
}
</script>

<style scoped lang="stylus">
.shop
  padding 55px 10px 10px 10px
  .avatar
    background white
    img
      max-width 100%
  .queue
    margin 10px 0
  .desc
    background white
    padding 10px
    margin 10px 0
    div
      //height 35px
      line-height 20px
      text-align left
      //border-radius 5px
      margin 10px 0
      span
        font-weight 700
      &.name
        font-weight 700
        font-size 16px
  .list
    img
      max-width 100%
</style>
